<template>
    <div class="atoname atonameSideMenu" :class="datas.cmpt_class || []" :style="datas.cmpt_style || {}">
        <el-scrollbar>
             <el-menu
                :mode="menuData.sideMode"
                :default-active="menuData.defaultActive"
                :background-color="menuData.background_color"
                :text-color="menuData.text_color"
                :active-text-color="menuData.active_text_color"
                :unique-opened="menuData.uniqueOpen"
                :menu-trigger="menuData.menu_trigger"
                @select="handleSelectFun"
                @open="handleOpenFun"
                @close="handleCloseFun">
                    <component :is="navMenusConf" :permissionShow="permissionConf" :navMenus="menuData.side_menu_data"></component>
            </el-menu>
        </el-scrollbar>
       <div>

       </div>
    </div>
</template>
<script>
export default {
    props:{
        datas:{
            type:Object,
            default(){
                return {
                    attr_data_conf:`{
                        side_menu_data:[
                            {
                                //一级
                                id: '0',
                                name: 'systemManage',
                                icon: 'el-icon-service',
                                alias: '系统管理',
                                value: '',
                                disabled: false,
                                //二级
                                childrens: [
                                    { 
                                        id: '1',
                                        name: 'orgManager',
                                        icon: 'el-icon-service',
                                        alias: '组织机构管理',
                                        value: '',
                                        disabled: false,
                                        childrens:[
                                            {
                                                id: '2',
                                                name: 'orgAuthManager',
                                                icon: 'el-icon-service',
                                                alias: '组织权限分配',
                                                value: '',
                                                disabled: false
                                            },
                                            {
                                                id: '3',
                                                name: 'orgStaffManager',
                                                icon: 'el-icon-service',
                                                alias: '机构人员分配',
                                                value: '',
                                                disabled: false
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                id: '4',
                                name: 'userManage',
                                icon: 'el-icon-service',
                                alias: '用户信息管理',
                                value: '',
                                disabled: false,
                                childrens:[
                                    {
                                        id: '5',
                                        name: 'userAuthConfig',
                                        icon: 'el-icon-service',
                                        alias: '权限设置',
                                        value: '',
                                        disabled: false
                                    },
                                    {
                                        id: '6',
                                        name: 'userDetail',
                                        icon: 'el-icon-service',
                                        alias: '用户详情',
                                        value: '',
                                        disabled: false
                                    }
                                ]
                            },
                            {
                                id: '7',
                                name: 'authManager',
                                icon: 'el-icon-service',
                                alias: '权限管理',
                                value: '',
                                disabled: false,
                                childrens:[
                                    {
                                        id:'8',
                                        name: 'authSetAuth',
                                        icon: 'el-icon-service',
                                        alias: '创建权限',
                                        value: '',
                                        disabled: false
                                    },
                                    {
                                        id:'9',
                                        name: 'authCheckAuth',
                                        icon: 'el-icon-service',
                                        alias: '查看权限',
                                        value: '',
                                        disabled: false,
                                        childrens:[
                                            {
                                                id: '10',
                                                name: 'authAddAuth',
                                                icon: 'el-icon-service',
                                                alias: '修改权限',
                                                value: '',
                                                disabled: false
                                            },
                                            {
                                                id: '11',
                                                name: 'authDelAuth',
                                                icon: 'el-icon-service',
                                                alias: '删除权限',
                                                value: '',
                                                disabled: false
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                id: '12',
                                name: 'roleManage',
                                icon: 'el-icon-service',
                                alias: '角色管理',
                                value: '',
                                disabled: false,
                                childrens:[
                                    {
                                        id: '13',
                                        name: 'roleDistrub',
                                        icon: 'el-icon-service',
                                        alias: '角色分配',
                                        value: '',
                                        disabled: false
                                    },
                                    {
                                        id: '14',
                                        name: 'roleAuthConfig',
                                        icon: 'el-icon-service',
                                        alias: '权限配置',
                                        value: '',
                                        disabled: false
                                    }
                                ]
                            },
                            {
                                id: '15',
                                name: 'basicInfo',
                                icon: 'el-icon-mobile-phone',
                                alias: '基础信息维护',
                                value: '',
                                disabled: true
                            }
                        ],
                        defaultActive:'',
                        background_color :"#545c64",
                        text_color :"#fff",
                        active_text_color :"#ffd04b",
                        uniqueOpen:true,
                        menu_trigger: 'click',
                        sideMode:'horizontal', // horizontal/ vertical
                    }`,
                    permission_conf:["systemManage","orgManager","orgAuthManager","orgStaffManager","userManage","userAuthConfig","userDetail","authManager","authCheckAuth","authAddAuth","basicInfo"],
                    intf:{},
                    intf_eName_conf:[],
                    cross_parameter_name: '',
                    event_ele_conf:`{
                        handleOpen:function(index, indexPath) {// 菜单展开回调
                            console.log(index);
                            console.log(indexPath);
                        },
                        handleClose:function(index, indexPath) {// 菜单收起回调
                            console.log(index);
                            console.log(indexPath);
                        },
                        handleSelect:function(index,indexPath){// 菜单激活回调
                            console.log(index);
                            console.log(indexPath);
                        },
                        mounted:function(){}
                    }`,
                    cmpt_class:[],
                    cmpt_style:{}
                }
            }
        }
    },
    data() {
        return {
            menuData: null,
            navMenusConf:null,
            permissionConf:[]
        };
    },
    created(){
        if(typeof(this.datas.attr_data_conf) == 'string'){
            try{
                this.menuData = new Function(`return ${this.datas.attr_data_conf}`)();
            }catch(err){
                this.menuData = JSON.parse(this.datas.attr_data_conf);
            }
        }else{
            this.menuData = this.datas.attr_data_conf;
        }
        if(typeof(this.datas.permission_conf) == 'string'){
            try{
                this.permissionConf = new Function(`return ${this.datas.permission_conf}`)();
            }catch(err){
                this.permissionConf = JSON.parse(this.datas.permission_conf);
            }
        }else{
            this.permissionConf = this.datas.permission_conf;
        }
        let extraMethods = new Function(`return ${this.datas.event_ele_conf}`)();
        Object.keys(extraMethods).forEach(key => {
            if(key!=='mounted'){
                this[key] = extraMethods[key].bind(this);
            }
        });
    },
    mounted(){
        let extraMethods = new Function(`return ${this.datas.event_ele_conf}`)();
        if(extraMethods.mounted){//处理事件配置中的mounted
            extraMethods.mounted.bind(this)();
        }
        this.navMenusConf={
            template:`
                <div class="navMenu">
                    <div v-for="navMenu in navMenus">
                        <!-- 最后一级菜单 -->
                        <el-menu-item v-if="!navMenu.childrens && navMenu.id && permissionShow.includes(navMenu.name)" :key="navMenu.id" :index="navMenu.name" :disabled="navMenu.disabled">
                            <i v-if="navMenu.icon" :class="navMenu.icon"></i>
                            <span slot="title">{{navMenu.alias}}</span>
                        </el-menu-item>
                        <!-- 菜单下还有子菜单 -->
                        <el-submenu v-if="navMenu.childrens && navMenu.id && permissionShow.includes(navMenu.name)" :key="navMenu.id" :index="navMenu.name" :disabled="navMenu.disabled">
                            <span slot="title">
                                <i v-if="navMenu.icon" :class="navMenu.icon"></i>
                                <span> {{navMenu.alias}}</span>
                            </span>
                            <!-- 递归 -->
                            <NavMenu style="overflow-x:auto;" class="childItem" :navMenus="navMenu.childrens" :permissionShow="permissionShow"></NavMenu>
                        </el-submenu>
                    </div>
                </div>
            `,
            name: 'NavMenu',
            props: {
                navMenus:{
                    type:Array,
                    required:true
                },
                permissionShow:{
                    type:Array,
                    default(){
                        return [];
                    }
                }
            },
            data(){
                return {
                }
            },
            mounted(){
            },
            methods: {
            }
        }
    },
    methods:{
        handleOpenFun(index, indexPath) {// 菜单展开回调
            this.handleOpen(index, indexPath)
        },
        handleCloseFun(index, indexPath) {// 菜单收起回调
            this.handleClose(index, indexPath)
        },
        handleSelectFun(index,indexPath){// 菜单激活回调
            this.handleSelect(index, indexPath)
        }
    }
};
</script>
<style lang="less">
*{
  outline:none;
}
.navMenu{
    display: flex;
    flex-direction: row;
    height: 73px !important;
}
.childItem{
    display: flex;
    flex-direction: column;
}
.el-menu--horizontal>div>div>.el-submenu .el-submenu__icon-arrow {
    position: static;
    vertical-align: middle;
    margin-left: 8px;
    margin-top: 3px;
}
.clearFloat{
    clear: both;
}
</style>